<template>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <strong>菜单管理</strong>
        </el-breadcrumb-item>
        <el-breadcrumb-item>添加菜单</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="main-box">
        <div class="item-1">
            <el-link type="primary">
                <strong>菜单名称:</strong>
            </el-link>
            <el-input type="text" v-model="menuObj.menuName" placeholder="请输入菜单名称,建议四个字" clearable></el-input>
        </div>
        <div class="item-2">
            <el-link type="primary">
                <strong>菜单编码:</strong>
            </el-link>
            <el-input type="text" v-model="menuObj.menuCode" placeholder="请输入菜单编码,不可重复" clearable></el-input>
        </div>
        <div class="item-3">
            <el-link type="primary">
                <strong>菜单图标:</strong>
            </el-link>
            <el-input type="text" v-model="menuObj.menuIcon" placeholder="请输入菜单图标" clearable></el-input>
        </div>
        <div class="item-4">
            <el-link type="primary">
                <strong>父级菜单:</strong>
            </el-link>
            <el-select v-model="menuObj.parentMenuId" class="m-2" placeholder="请选择父级菜单" size="large" @change="parentCharge" clearable>
                <el-option v-for="(item,index) in parentList" :key="index" :label="item.menuName" :value="item.menuId"/>
            </el-select>
        </div>
        <div class="item-6">
            <el-link type="primary">
                <strong>跳转路径:</strong>
            </el-link>
            <el-input type="text" v-model="menuObj.skipPath" placeholder="请输入菜单跳转路径" clearable></el-input>
        </div>
        <div class="item-5">
            <el-link type="primary">
                <strong>菜单类型:</strong>
            </el-link>
            <el-select v-model="menuObj.menuType" class="m-2" placeholder="请选择菜单类型" size="large">
                <el-option label="菜单" value="1"/>
                <el-option label="权限" value="0"/>
            </el-select>
        </div>
        <div class="item-7">
            <el-link type="primary">
                <strong>菜单顺序:</strong>
            </el-link>
            <el-input type="text" v-model="menuObj.menuSort" placeholder="请输入菜单顺序,数字" clearable></el-input>
        </div>
        <div class="item-8">
            <el-link type="primary">
                <strong>是否作废:</strong>
            </el-link>
            <el-select v-model="menuObj.invalidFlag" class="m-2" placeholder="请选择菜单状态" size="large">
                <el-option label="否" value="1"/>
                <el-option label="是" value="0"/>
            </el-select>
        </div>
        <div class="item-9">
            <el-link type="primary">
                <strong>菜单归属:</strong>
            </el-link>
            <el-select v-model="menuObj.menuSys" class="m-2" placeholder="请选择菜单归属" size="large">
                <el-option label="bobo-planet 波波星球" value="bobo_planet"/>
                <el-option label="oa-sys oa管理系统" value="oa_sys"/>
            </el-select>
        </div>
        <div class="item-10">
            <el-link type="primary">
                <strong>使用状态:</strong>
            </el-link>
            <el-select v-model="menuObj.menuState" class="m-2" placeholder="请选择菜单使用状态" size="large">
                <el-option label="通用" value="0"/>
                <el-option label="未登录" value="1"/>
                <el-option label="已登录" value="2"/>
                <el-option label="其他" value="3"/>
            </el-select>
        </div>
        <div class="item-10">
            <el-button type="success" @click="addMenu">点击添加</el-button>
            <el-button type="warning" @click="resetMenuForm">点击重置</el-button>
        </div>
    </div>
</template>

<script setup>
import { $http } from "@/utils/axios";
import { gatewayPrefix, userMiddleContextPath} from '@/utils/commConstance';
import { ElMessage } from "element-plus";
import { onMounted, reactive, ref } from "vue";
onMounted(()=>{
    findParentMenus()
})
let menuObj = reactive({
    menuName: '',
    menuCode: '',
    menuIcon: '',
    parentMenuId: '',
    skipPath: '',
    menuType: '',
    menuSort: '',
    invalidFlag: '',
    menuSys: '',
    menuState: ''
})
const parentCharge=()=>{
    console.log('选择代餐===>',menuObj);
}
const parentList = ref([])
const findParentMenus = ()=>{
    $http.get(`${gatewayPrefix}/${userMiddleContextPath}/planetMenus/findParentMenus`).then(res=>{
        parentList.value = res
    })
}
const addMenu = ()=>{
    if(menuObj.menuName == null || menuObj.menuName == ''){
        return ElMessage.warning('菜单名称不能为空')
    }
    if(menuObj.menuCode == null || menuObj.menuCode == ''){
        return ElMessage.warning('菜单编码不能为空')
    }
    if(menuObj.menuIcon == null || menuObj.menuIcon == ''){
        return ElMessage.warning('菜单图标不能为空')
    }
    if(menuObj.menuSys == null || menuObj.menuSys == ''){
        return ElMessage.warning('菜单所属系统不能为空')
    }
    $http.post(`${gatewayPrefix}/${userMiddleContextPath}/planetMenus/addMenu`,menuObj).then(res=>{
        if(res){
            Object.keys(menuObj).forEach(key=>{
                menuObj[key]=null
            })
            findParentMenus()
            ElMessage.success('菜单添加成功')
        }
    })
}
const resetMenuForm = ()=>{
    Object.keys(menuObj).forEach(key=>{
            menuObj[key]=null
    })
    ElMessage.warning('菜单信息重置成功')
}
</script>

<style lang="less" scoped>
.main-box{
    width: 100%;
    height: 80%;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: flex-start;
    .item-1,.item-2,.item-3,.item-4,.item-5,.item-6,.item-7,.item-8,.item-9,.item-10{
        width: 40%;
        height: 50px;
        margin-top: 20px;
        display: flex;
        align-items: center; 
        .el-link{
            font-size: 16px;
            strong{
                min-width: 80px;
            }
        }
        
        .el-input{
            height: 100%;
        }
    }
    .item-4,.item-5,.item-8,.item-9,.item-10{
        .el-select{
            width: 100%;
            height: 50px;
            .select-trigger,
            .el-input--large{
                height: 100%;
            }   
        }
        
    }
}
</style>